import { Component } from "react";

class Toggle extends Component {
  // 定义并初始化实例属性 ( 名称是 state ，取值是个对象 )
  state = {
    isToggleOn: true,
  };
  // 定义并初始化实例属性 ( 名称是 handleClick ，取值是个箭头函数)
  handleClick = () => {
    // 在箭头函数内的 this 是从上下文中获取到的
    this.setState((prevState) => ({
      isToggleOn: !prevState.isToggleOn,
    }));
  };
  render() {
    return (
      <div className="wrapper">
        <p>自动绑定事件监听器</p>
        <button onClick={this.handleClick}>
            {this.state.isToggleOn ? "ON" : "OFF"}
        </button>
      </div>
    );
  }
}

export default Toggle;
